<template>
  <div class="XnyVxeTable">
    <!-- :height="$ocean.vaildData(tableOption.height, config.vxeTable.height)" -->
    <vxe-table
      v-bind="$attrs"
      v-on="$listeners"
      ref="vxeTable"
      :height="
        tableOption.height == 'none'
          ? null
          : $ocean.vaildData(tableOption.height, config.vxeTable.height)
      "
      :data="data"
      :stripe="$ocean.vaildData(tableOption.stripe, config.vxeTable.stripe)"
      :align="$ocean.vaildData(tableOption.align, config.vxeTable.align)"
      :column-config="{
        resizable: $ocean.vaildData(
          tableOption.resizable,
          config.vxeTable.resizable
        ),
      }"
      :row-config="{
        isCurrent: $ocean.vaildData(
          tableOption.isCurrent,
          config.vxeTable.isCurrent
        ),
        isHover: $ocean.vaildData(tableOption.isHover, config.vxeTable.isHover),
        height: $ocean.vaildData(
          tableOption.lineHeight,
          config.vxeTable.lineHeight
        ),
      }"
      :tree-config="{
        rowField: 'id',
      }"
    >
      <!-- 复选框 -->
      <vxe-column
        v-if="$ocean.vaildData(tableOption.checkbox, config.vxeTable.checkbox)"
        type="checkbox"
        width="50"
        fixed="left"
        align="center"
      ></vxe-column>
      <!-- 序号列 -->
      <vxe-column
        v-if="$ocean.vaildData(tableOption.seq, config.vxeTable.seq)"
        type="seq"
        width="100"
        fixed="left"
        title="序号"
        align="center"
        :header-align="
          $ocean.vaildData(tableOption.headerAlign, config.vxeTable.headerAlign)
        "
      ></vxe-column>
      <!-- 数据列 -->
      <template v-for="(item, index) in vxeColumn">
        <vxe-column
          ref="VxeColumn"
          v-if="!$ocean.vaildData(item.hide, false)"
          :width="item.width"
          :field="item.prop"
          :title="item.label"
          :align="
            item.align ||
            $ocean.vaildData(tableOption.align, config.vxeTable.align)
          "
          :header-align="
            $ocean.vaildData(
              tableOption.headerAlign,
              config.vxeTable.headerAlign
            )
          "
          :tree-node="index == 0"
          :key="'vxe-column' + index + key"
          :fixed="$ocean.vaildData(item.fixed, false) ? 'left' : ''"
          :sortable="$ocean.vaildData(item.sortable, false)"
          :show-overflow="
            $ocean.vaildData(item.showOverflow, config.vxeTable.showOverflow)
          "
          :show-header-overflow="
            $ocean.vaildData(
              tableOption.showHeaderOverflow,
              config.vxeTable.showHeaderOverflow
            )
          "
        >
          <!-- <template
            #default="{
              row,
              rowIndex,
              $rowIndex,
              column,
              columnIndex,
              $columnIndex,
              _columnIndex,
            }"
            v-if="columnSlotList.includes(item.prop)"
          >
            <div>
              <slot
                :name="item.prop"
                v-bind="{
                  row,
                  rowIndex,
                  $rowIndex,
                  column,
                  columnIndex,
                  $columnIndex,
                  _columnIndex,
                }"
              ></slot>
            </div>
          </template> -->
          <template #default="scope">
            <div v-if="columnSlotList.includes(item.prop)">
              <slot :name="item.prop" v-bind="scope"></slot>
            </div>
            <span v-else>{{ handleDetail(scope.row, item) }}</span>
            <!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
          </template>
        </vxe-column>
      </template>
      <!-- 操作栏 -->
      <vxe-column
        title="操作"
        align="center"
        :header-align="
          $ocean.vaildData(tableOption.headerAlign, config.vxeTable.headerAlign)
        "
        :width="
          $ocean.vaildData(tableOption.menuWidth, config.vxeTable.menuWidth)
        "
        :fixed="
          tableOption.menuFixed == 'none'
            ? ''
            : $ocean.vaildData(tableOption.menuFixed, config.vxeTable.menuFixed)
        "
        v-if="$ocean.vaildData(tableOption.menu, config.vxeTable.menu)"
      >
        <template slot-scope="scope">
          <!--
          @slot 操作列自定义按钮左
          @binding {Object} row - 该条数据对象
          @binding {Number} index - 该条数据对象下标
          删除 修改按钮的 显示/隐藏 传false/true,
         -->
          <slot name="menuLeft" v-bind="scope"></slot>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="
              function () {
                $emit('handleUpdate', scope.row)
                $emit('handle-update', scope.row)
              }
            "
            v-if="$ocean.vaildData(option.editBtn, true)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click.stop="
              function () {
                $emit('handleDelete', scope.row)
                $emit('handle-delete', scope.row)
              }
            "
            v-if="$ocean.vaildData(option.delBtn, true)"
            >删除</el-button
          >
          <!--
          @slot 操作列自定义按钮右
          @binding {Object} row - 该条数据对象
          @binding {Number} index - 该条数据对象下标
         -->
          <slot name="menuRight" v-bind="scope"></slot>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import config from '../../config'

/**
 * 二次封装vxe-table组件
 */
export default {
  name: 'XnyVxeTable',
  data() {
    return {
      // config: {
      //   resizable: true,
      //   stripe: true,
      //   menuWidth: 200,
      //   menuFixed: 'right',
      //   menu: true,
      //   isHover: true,
      //   isCurrent: false,
      //   align: 'center',
      //   headerAlign: 'center',
      //   seq: true,
      //   checkbox: false,
      //   lineHeight: 40,
      // },
      config,
      key: new Date().getTime(),
    }
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    column: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {},
  watch: {},
  computed: {
    tableOption() {
      return this.option || {}
    },
    // 表格数据列
    vxeColumn() {
      const column = this.$ocean.deepClone(this.column)
      // column.forEach(
      //   (item, index) => (item.index = this.$ocean.vaildData(item.index, index))
      // )
      column.sort((firstEl, secondEl) =>
        this.$ocean.vaildData(secondEl.index, Infinity) >
        this.$ocean.vaildData(firstEl.index, Infinity)
          ? -1
          : 1
      )
      return column
    },
    // 表格列插槽
    columnSlotList() {
      const slotList = []
      this.vxeColumn.forEach((el) => {
        if (this.$scopedSlots[el.prop]) slotList.push(el.prop)
      })
      return slotList
    },
  },
  methods: {
    // 设置行为选中状态，第二个参数为选中与否
    getData(rowIndex) {
      return this.$refs.vxeTable.getData(rowIndex)
    },
    // 设置行为选中状态，第二个参数为选中与否
    setCheckboxRow(rows, checked) {
      this.$refs.vxeTable.setCheckboxRow(rows, checked)
    },
    // 表格内容处理
    handleDetail(row, column) {
      if (['radio', 'select'].includes(column.type)) {
        return this.findByValue(row[column.prop], column.dicData, column.props)
      }
      return row[column.prop]
    },
    // 根据字典的value显示label
    findByValue(value, dic, props) {
      if (!dic || dic.length < 1) return ''
      const valueKey = props ? props.value || 'value' : 'value'
      const labelKey = props ? props.label || 'label' : 'label'
      // if (dic.length > 599) console.log(valueKey, labelKey)
      const val = dic.filter((item) => item[valueKey] == value)[0]
      // console.log(val,value)
      if (val == 0) return val[labelKey]
      // console.log(val, value, dic, props)
      // return val ? val[labelKey] : ''
      return val ? val[labelKey] : value
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.XnyVxeTable {
  width: calc(100% - 8px);
  margin: 4px;
  flex-grow: 1;
  height: 100% !important;
  max-height: 100% !important;
  overflow: auto;

  ::v-deep .vxe-table--body {
    .vxe-body--column {
      padding: 0;
    }

    .vxe-body--row.row--stripe {
      background-color: #f0f0f0;
    }
    .vxe-body--row.row--current {
      background-color: #c0e1fb;
    }
  }
  // ::v-deep .vxe-table--header-wrapper {
  //   background-color: #f0f0f0;
  // }
}
</style>
